<style lang="css" scoped>
  .el-table .cell .el-tooltip {
    white-space: pre-line;
  }
</style>

<template>
  <el-card shadow="never">
    <!-- 搜索表单 -->
    <el-form
      :model="where"
      label-width="77px"
      class="ele-form-search"
      @keyup.enter.native="reload"
      @submit.native.prevent>
      <el-row :gutter="15">

        <el-col :lg="8" :md="12">
          <el-form-item label="选择时间:">
            <el-date-picker
              style="width: 100%"
              v-model="where.time_range"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              label-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :lg="6" :md="12">
          <el-form-item label="选择游戏">
            <PageSelect
              :placeholder="'请选择游戏'"
              v-model="where.box_game_id"
              :whereName="'name'"
              :url="'/BoxRebate/getGameList'"
              :optionLable="'game_name'"
              :optionvalue="'id'"
              :multiple="false"
            />
          </el-form-item>
        </el-col>

        <el-col :lg="6" :md="12">
          <el-form-item label="选择区服:">
            <PageSelect
              :placeholder="'请选择区服'"
              v-model="where.open_id"
              :whereName="'name'"
              :url="openUrl"
              :optionLable="'name'"
              :optionvalue="'id'"

            />
          </el-form-item>
        </el-col>

        <el-col :lg="4" :md="12">
          <div class="ele-form-actions">
            <el-button
              type="primary"
              icon="el-icon-search"
              class="ele-btn-icon"
              @click="reload">查询
            </el-button>
            <el-button @click="reset">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <!-- 数据表格 -->
    <ele-pro-table
      ref="table"
      :where="where"
      :datasource="url"
      :columns="columns"
      :selection.sync="selection"
      height="calc(100vh - 315px)"
      :needPage="false">
      <template slot="toolbar">
<!--        <el-button-->
<!--          size="small"-->
<!--          type="success"-->
<!--          icon="el-icon-download"-->
<!--          class="ele-btn-icon"-->
<!--          @click="exportExcel"-->
<!--          v-if="permission.includes('sys:report-member:export')">导出-->
<!--        </el-button>-->
      </template>
    </ele-pro-table>
  </el-card>
</template>

<script>
    import {mapGetters} from "vuex";
    import {downloadExcel} from "@/utils/excel-export"
    import PageSelect from "@/components/pageSelect/index.vue";


    export default {
        name: 'rebateLog',
        components: {PageSelect},
        computed: {
            ...mapGetters(["permission"]),
        },
        data() {
            return {
                // 表格数据接口
                url: '/BoxRebate/rebatelog',
                // 表格列配置
                columns: [
                    {
                        prop: 'plat_name',
                        label: 'GM名称',
                        showOverflowTooltip: true,
                        minWidth: 100,
                        align: 'center',
                    },
                    {
                        prop: 'game_name',
                        label: '游戏名称',
                        showOverflowTooltip: true,
                        minWidth: 100,
                        align: 'center',
                    },
                    {
                        prop: 'open_name',
                        label: '区服名称',
                        showOverflowTooltip: true,
                        minWidth: 100,
                        align: 'center',
                    },
                    {
                        prop: 'send_type_name',
                        label: '发放方式',
                        showOverflowTooltip: true,
                        minWidth: 100,
                        align: 'center',
                    },
                    {
                        prop: 'gradient_data',
                        label: '返利梯度',
                        showOverflowTooltip: true,
                        minWidth: 100,
                        align: 'center',
                    },
                    {
                        prop: 'member_name',
                        label: '返还玩家游戏小号',
                        showOverflowTooltip: true,
                        minWidth: 150,
                        align: 'center',
                    },
                    {
                        prop: 'game_role_name',
                        label: '返还玩家游戏角色',
                        showOverflowTooltip: true,
                        minWidth: 150,
                        align: 'center',
                    },
                    {
                        prop: 'pay_amount',
                        label: '充值金额(单位：元)',
                        showOverflowTooltip: true,
                        minWidth: 150,
                        align: 'center',
                    },
                    {
                        prop: 'refund_amount',
                        label: '返还玩家金额(单位:元)',
                        showOverflowTooltip: true,
                        minWidth: 150,
                        align: 'center',
                    },
                    {
                        prop: 'create_time',
                        label: '创建时间',
                        sortable: 'custom',
                        showOverflowTooltip: true,
                        minWidth: 160,
                        align: 'center',
                        formatter: (row, column, cellValue) => {
                            return this.$util.toDateString(cellValue);
                        }
                    },
                ],
                // 表格搜索条件
                where: {},
                // 表格选中数据
                selection: [],
                openUrl: '/BoxRebate/getGameOpenList',
            };
        },
        watch: {
            "where.box_game_id"(val) {
                this.openUrl = `/BoxRebate/getGameOpenList?game_id=` + val;
            }
        },
        methods: {
            /* 下载数据Excel */
            exportExcel() {
                this.where.type = 5
                this.where.authinfo = this.urlEncodedToken
                downloadExcel(`boxStatisticsReport/memberRemainExport`, this.where)
            },
            /* 刷新表格 */
            reload() {
                this.$refs.table.reload({where: this.where});
            },
            // /* 重置搜索 */
            reset() {
                this.where = {}
                this.reload();
            },

            timestampToTime(timestamp) {
                var date = new Date(timestamp * 1000); //JavaScript的Date对象使用的是毫秒时间戳，因此需要将Unix时间戳乘以1000
                var Y = date.getFullYear() + "-";
                var M =
                    (date.getMonth() + 1 < 10
                        ? "0" + (date.getMonth() + 1)
                        : date.getMonth() + 1) + "-";
                var D =
                    (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());
                return Y + M + D
            },

            todayformatter() {
                let now = new Date();
                let year = now.getFullYear();  // 获取年份
                // let month = now.getMonth() + 1;  // 获取月份（注意月份从0开始，所以需要加1）
                // let date = now.getDate();  // 获取日期
                let month = ("0" + (now.getMonth() + 1)).slice(-2);  // 获取月份（注意月份从0开始，所以需要加1）
                let date = ("0" + now.getDate()).slice(-2);  // 获取日期
                return year + "-" + month + "-" + date;
            },

            sevenDaysBefores() {
                let now = new Date(); // 获取当前时间
                let sevenDaysBefore = now.setDate(now.getDate() - 7); // 将当前时间往前推七天
                let seven = parseInt(sevenDaysBefore / 1000)
                return this.timestampToTime(seven)
            }

        }
    }
</script>

<style scoped>
</style>
